<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <!-- 表格内搜索表单 -->
      <common-form
        :form-infos="searchForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onSearchSubmit"
      />
    </common-table>
  </div>
</template>

<script>
import { defineComponent, shallowReactive } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '订单列表',
      attrs: {
        data: [
          //表格需要的数据
          {
            shop_message: "唯红",
            price: "20",
            number: "30",
            total_price: "50",
            buyer: "大帅比",
            consignee: "老鹰比",
            shop_title: "红星",
            transaction_state: "交易中",
          },
          {
            shop_message: "唯红",
            price: "20",
            number: "30",
            total_price: "50",
            buyer: "大帅比",
            consignee: "老鹰比",
            shop_title: "红星",
            transaction_state: "交易中",
          },
          {
            shop_message: "唯红",
            price: "20",
            number: "30",
            total_price: "50",
            buyer: "大帅比",
            consignee: "老鹰比",
            shop_title: "红星",
            transaction_state: "交易中",
          },
          {
            shop_message: "唯红",
            price: "20",
            number: "30",
            total_price: "50",
            buyer: "大帅比",
            consignee: "老鹰比",
            shop_title: "红星",
            transaction_state: "交易中",
          },
        ],
        ref: "multipleTable",
        style: "100%",
        border: true,
      },
      // Table-column Attributes
      column: [
        {
          type: "selection", //多选框Attribute
        },
        {
          prop: "shop_message",
          label: "商品信息",
        },
        {
          prop: "price",
          label: "价格",
        },
        {
          prop: "number",
          label: "数量",
        },
        {
          prop: "total_price",
          label: "实付金额",
        },
        {
          prop: "buyer",
          label: "买家",
        },
        {
          prop: "consignee",
          label: "收货人",
        },
        {
          prop: "shop_title",
          label: "商家名称",
        },
        {
          prop: "transaction_state",
          label: "交易状态",
        },
      ],
      // 操作按钮
      controller: ["编辑", "预览", "审核", "违规下架"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      // 用户信息
      {
        id: 1,
        name: "CommonInput",
        prop: "l1",
        value: "",
        formItemAttrs: {
          label: "用户信息 :",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },

      // 关键字
      {
        id: 2,
        name: "CommonInput",
        prop: "l2",
        value: "",
        formItemAttrs: {
          label: "关键字 :",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },

      // 订单状态
      {
        id: 3,
        name: "CommonSelect",
        prop: "l3",
        value: "",
        options: {
          1: "全部",
          2: "待支付",
          3: "待发货",
          4: "已发货",
          5: "已收货",
          6: "已完成",
          7: "已关闭",
          8: "退款中",
        },
        formItemAttrs: {
          label: "订单状态 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },

      // 营销类型
      {
        id: 4,
        name: "CommonSelect",
        prop: "l4",
        value: "",
        options: {
          1: "全部",
          2: "自营",
          3: "非自营",
        },
        formItemAttrs: {
          label: "营销类型 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },

      // 结算状态
      {
        id: 5,
        name: "CommonSelect",
        prop: "l5",
        value: "",
        options: {
          1: "全部",
          2: "已结算",
          3: "未结算",
        },
        formItemAttrs: {
          label: "结算状态 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
